<template>
  <div id="add_menu_group">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
    >
      <el-form-item
        prop="title"
        label="菜单组名称"
      >
        <el-input
          v-model="form.title"
          placeholder="请输入1-100位字符"
          :maxlength="100"
        />
      </el-form-item>
      <el-form-item
        prop="status"
        label="状态"
      >
        <el-switch v-model="form.status">
        </el-switch>
      </el-form-item>
      <el-form-item class="text-center">
        <el-button
          @click="submit('form')"
          :loading="loading"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addMenuGroup } from "@/api";
export default {
  data() {
    return {
      loading: false,
      form: {
        title: "",
        status: true
      },
      rules: {
        title: [
          { required: true, message: "菜单组名称不能为空", trigger: "blur" },
          {
            max: 100,
            min: 1,
            message: "菜单组名称为1到100位字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    submit(data) {
      this.$submit(this, data, () => {
        this.loading = true;
        let form = {
          title:this.form.title,
          status:this.form.status*1
        }
        addMenuGroup(
          form,
          () => {
            this.loading = false;
            this.$emit("close", true);
          },
          () => {
            this.loading = false;
          }
        );
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
